<script setup lang="ts">
import type { Cell } from "@antv/x6";
import BindMachineDialog from "./BindMachineDialog.vue";
import BindScriptDialog from "./BindScriptDialog.vue";
import ScriptExecDialog from "./ScriptExecDialog.vue";
import { ref } from "vue";
import api from "@/api";
import { useRouter } from "vue-router";

const router = useRouter();

const props = defineProps<{
  cell?: Cell;
}>();

const bindMachineDialogVisible = ref(false);
const bindScriptDialogVisible = ref(false);
const scriptExecDialogRef = ref<InstanceType<typeof ScriptExecDialog>>();
const handleBindMachine = (id: string) => {
  console.log("绑定机器id => ", id, props.cell);
  if (props.cell) {
    const data = props.cell.getData() ?? {};
    const machineList = data.machineList || [];
    console.log(
      "test1",
      machineList,
      data,
      machineList.some((item: string) => item === id)
    );
    if (machineList.some((item: string) => item === id)) {
      return;
    }

    console.log("test2");

    machineList.push(id);

    data.machineList = machineList;

    props.cell.setData(data);

    loadData();
  }

  console.log(props.cell?.getData());
};

type Script = {
  scriptTemplateId: string;
  name: string;
};

const handleBindScript = (script: Script) => {
  console.log("绑定脚本 => ", script);

  if (props.cell) {
    const data = props.cell.getData() ?? {};
    const scriptList = data.scriptList ?? [];

    if (scriptList.some((item: Script) => item.scriptTemplateId === script.scriptTemplateId)) {
      return;
    }

    scriptList.push(script);
    data.scriptList = scriptList;
    props.cell.setData(data);

    loadData();
  }
};

type Machine = {
  id: string;
  name: string;
};

const tableData = ref<Array<Machine>>([]);

const operationList = ref<Array<Script>>([]);

const handleOperation = (machineId: string, scriptId: string) => {
  console.log("操作 => ", machineId, scriptId);
  scriptExecDialogRef.value?.exec(machineId, scriptId);
};

const loadData = () => {
  tableData.value = [];
  operationList.value = [];
  if (!props.cell) {
    return;
  }
  const data = props.cell.getData() ?? {};
  const machineList = data.machineList ?? [];

  if (machineList.length === 0) {
    return;
  }

  api.machine
    .getMachinePage({
      current: 1,
      size: 9999,
      idIn: machineList
    })
    .then((r) => {
      console.log("r => ", r);
      tableData.value = r.data.data.map((item) => {
        return {
          name: item.name,
          id: item.id
        };
      });
      console.log("tableData.value => ", tableData.value);
    });

  const scriptList = data.scriptList ?? [];
  operationList.value = scriptList;
};

const handleRemoveMachine = (row: any) => {
  if (props.cell) {
    const data = props.cell.getData() ?? {};
    const machineList = data.machineList ?? [];
    machineList.splice(machineList.indexOf(row.id), 1);
    data.machineList = machineList;
    props.cell.setData(data);
  }

  tableData.value = tableData.value.filter((item) => {
    return item.id !== row.id;
  });
};

const handleRemoveScript = (script: Script) => {
  if (props.cell) {
    const data = props.cell.getData() ?? {};
    const scriptList = data.scriptList ?? ([] as Array<Script>);

    scriptList.splice(
      scriptList.indexOf((item: Script) => item.scriptTemplateId === script.scriptTemplateId),
      1
    );
    data.scriptList = scriptList;
    props.cell.setData(data);
  }

  operationList.value = operationList.value.filter((item) => {
    return item.scriptTemplateId !== script.scriptTemplateId;
  });
};

const openInNewWindow = (id: string) => {
  const { href } = router.resolve({
    name: "terminal",
    query: {
      id: id
    }
  });
  window.open(href, "_blank");
};
</script>
<template>
  <el-drawer title="主机信息" direction="rtl" @open="loadData">
    <div>
      <el-button type="primary" @click="bindMachineDialogVisible = true"> 绑定机器 </el-button>
      <el-button type="primary" @click="bindScriptDialogVisible = true"> 绑定脚本 </el-button>
    </div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="名称" width="180" />
      <el-table-column fixed="right" label="操作" min-width="120">
        <template #default="scope">
          <el-button link type="primary" size="small" @click="handleRemoveMachine(scope.row)">
            删除
          </el-button>
          <el-button link type="primary" size="small" @click="openInNewWindow(scope.row.id)">
            终端
          </el-button>
          <el-popconfirm
            title="确认执行？"
            v-for="item in operationList"
            @confirm="handleOperation(scope.row.id, item.scriptTemplateId)"
          >
            <template #reference>
              <el-button link type="primary" size="small">
                {{ item.name }}
              </el-button>
            </template>
            <template #actions="{ confirm, cancel }">
              <el-button size="small" @click="cancel">取消</el-button>
              <el-button type="primary" size="small" @click="confirm">执行</el-button>
              <el-button type="danger" size="small" @click="handleRemoveScript(item)"
                >删除</el-button
              >
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <bind-machine-dialog
      v-model:dialogVisible="bindMachineDialogVisible"
      @submit="handleBindMachine"
    />
    <bind-script-dialog
      v-model:dialogVisible="bindScriptDialogVisible"
      @submit="handleBindScript"
    />
    <script-exec-dialog ref="scriptExecDialogRef" />
  </el-drawer>
</template>
